<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="app">
    <h3 style="text-align: center;">拍卖</h3>
    <el-row>
        <el-col :span="8" style="margin-top: 100px">
            <!--            <div class="demo-image__lazy">-->
            <!--                <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>-->
            <!--            </div>-->
<!--            <template>-->
<!--                <el-carousel height="300px" direction="vertical" :autoplay="true">-->
<!--                    <el-carousel-item v-for="url in urls" :key="url">-->
<!--                        <h3 class="medium"><el-image :src="url"></el-image></h3>-->
<!--                    </el-carousel-item>-->
<!--                </el-carousel>-->
<!--            </template>-->
            <template>
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="url in urls" :key="url">
                        <h3 class="medium">
                            <el-image :src="url"></el-image>
                        </h3>
                    </el-carousel-item>
                </el-carousel>
            </template>
        </el-col>
        <el-col :span="8" style="text-align: center">
            <el-form>
                <el-form-item>
                    <div style="font-weight:bold ;font-size:20px">场次:{{round.id}}</div>
                </el-form-item>
                <el-form-item>
                    距结束:<el-statistic :value="Date.parse(round.starttime)" time-indices
                                  format="HH时:mm分:ss秒"
                    ></el-statistic>
                </el-form-item>
                <el-form-item>
                    <div style="font-weight:bold ;font-size:20px">{{round.typeNmae}}《{{round.pname}}》</div>
                </el-form-item>
                <el-form-item>
                    <div v-if="!flag">起拍价:¥
                        <div style="font-weight:bold ;font-size:30px">{{currentPrice}}</div>
                    </div>
                    <div v-if="flag">当前价:¥
                        <div style="font-weight:bold ;font-size:30px">{{currentPrice}}</div>
                    </div>

                </el-form-item>
                <el-form-item>
                    <el-input-number v-model="offerPrice" @change="handleChange(offerPrice)" :step="round.stepprice"
                                     :min="minPrice" :max="Number.MAX_VALUE"
                    ></el-input-number>
                </el-form-item>
                <el-form-item>
                    <div>竞价阶梯：{{round.stepprice}}元</div>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" @click="addAuction(offerPrice)">
                        立刻出价
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-col :span="8">
            <div id="chatbox" style="height:85%;overflow:hidden">这里是聊天室</div>
        </el-col>
    </el-row>

</div>
<script>
    //ws
    let api = "ws://" + location.host + "/p?roundId=" + window.parent.app.roundId;
    let ws = new WebSocket(api);

    var app = new Vue({
        el: "#app",
        data: {
            //
            roundId: '',
            urls: [],
            round: '',
            pname: '',
            msg: '',
            currentPrice: '',
            startPrice: '',
            offerPrice: '',
            flag: false,
            minPrice: ''
        },
        methods: {
            //
            initRound() {
                $.get("/round/getRoundById", {roundId: this.roundId}, function (data) {
                    app.urls = data.productSrcs;
                    app.round = data;
                    app.pname = data.pname;
                    app.startPrice = data.startprice
                    app.minPrice = data.startprice
                })
            },
            handleChange() {

            },
            addAuction(offerPrice) {
                let account = window.parent.app.account;
                $.post("/auction/addAuction", {offerPrice: offerPrice, roundId: this.roundId}, function (data) {
                    if ("ok" === data) {

                    } else {
                        alert(data);
                        return;
                    }
                    ws.send(account + "出价:" + offerPrice);
                })
            },
            initCurrentPrice() {
                $.get("/auction/getCurrentPrice", {
                    roundId: this.roundId,
                    startPrice: this.startPrice
                }, function (data) {
                    app.currentPrice = data;
                    app.offerPrice = data;
                    if (data !== app.startPrice) {
                        app.flag = true;
                        app.offerPrice = data + app.round.stepprice;
                    }
                })

            }
        },

        created() {
            this.roundId = window.parent.app.roundId;
            this.startPrice = window.parent.app.startPrice;
            this.initRound();
            this.initCurrentPrice();
        }
    });
    $(function () {
        $('.el-input__inner').attr("readonly", true)
    })
    //ws.onmsg
    ws.onmessage = function (e) {
        app.offerPrice = parseInt(e.data.split(":")[1]) + app.round.stepprice;
        app.minPrice = parseInt(e.data.split(":")[1]) + app.round.stepprice;
        app.currentPrice = parseInt(e.data.split(":")[1]);
        if (parseInt(e.data.split(":")[1]) !== app.startPrice) {
            app.flag = true;
        }
        let row = "<div>" + e.data + "</div>";
        $("#chatbox").append(row);
        $("#chatbox")[0].scrollTop = $("#chatbox")[0].scrollHeight;
    }

</script>
<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 500px;
        margin: 0;
    }
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
</body>
</html>